<script setup lang='ts'>
import {  onMounted, ref } from 'vue'
import { Upload  } from '@element-plus/icons-vue'
import { getAnn,deleteAnn } from "../../../api/api";
import upData from "./upData/addData.vue";
const title = ref()
const data = ref([])
const centerDialogVisible = ref(false)
onMounted(()=>{
    getData()
})
//删除数据
const handleDelete = async(row: string) => {
    const res = await deleteAnn({id:row})
    data.value = res.data.data
}
const inFO = (e: boolean) => {
    centerDialogVisible.value = e;
}
//获取数据
const getData = async() => {
    const res = await getAnn()
    console.log(res.data);
    data.value = res.data.data
}
//添加数据
const getNewData = (value:any) => {
    data.value = value
}
</script>

<template>
    <upData title="添加公告" :ann="title" :centerDialogVisible @update:centerDialogVisible="inFO" @update:newData="getNewData">
        <el-form label-width="auto">
            <el-form-item label="公告：">
                <el-input v-model="title" placeholder="请输入公告" />
            </el-form-item>
        </el-form>
    </upData>
    <!--  -->
    <div class="data">
        <div class="input">
            <el-button type="primary" :icon="Upload" @click="centerDialogVisible = !centerDialogVisible">添加公告</el-button>
        </div>
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id" />
            <el-table-column label="公告" prop="data" />
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="handleDelete(scope.row._id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>